<style lang="scss" scoped>
	@import '@/assets/css/variable';

	.recharge{
		width: 100%;
		background-color: $bgw;
		min-height: 100%;
		font-size: 1.2rem;
		box-sizing: border-box;
		position: absolute;
		top: 0;
		bottom: 0;
		background-color: #fcfcfc;
		padding: 2rem 1.6rem;
		.title{
			color: $mainColor;
			font-size: 1.6rem;
			color: $mainColor;
		}
		.selectBox{
			overflow: hidden;
			position: relative;
			margin-top: 1.6rem;
			.itemList{
				margin-top: 10px;
				.item{
					float: left;
					width: 29%;
					margin-left: 3%;
					margin-top: 1rem;
					text-align: center;
					padding-top: 2rem;
					padding-bottom: 2rem;
					border: 1px solid #D8D7D7;
					&.active{
						color: $mainColor;
						border: 1px solid $mainColor;
					}
				}
			}
		}
		.valueBox{
			overflow: hidden;
			position: relative;
			margin-top: 1.8rem;
		}
		.btnBox{
			margin-top: 2rem;
			width: 80%;
			margin-left: 10%;
		}
	}
</style>
<template>
	<div class="recharge">
		<div class="title">票务平台商家充值入口</div>
		<div class="selectBox">
			<div>选择金额</div>
			<div class="itemList">
				<div class="item" :class="item.check?'active':''" @click="activeItem(item)" v-for="item in selectList">{{item.label}}</div>
			</div>
		</div>
		<div class="valueBox">
			<!-- <van-icon name="after-sale" /> -->
			<van-field v-model="value" label="充值金额" placeholder="请填写充值金额" :maxlength="6" input-align="right" right-icon="after-sale"/>
		</div>
		<div class="btnBox">
			<van-button @click="reChargeBtn()" round class="submit" type="info" size="normal" block>确认充值</van-button>
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	// import ZixunList from '@/components/zixunList.vue'
	import {
		myMixins
	} from "@/assets/js/mixins.js"
	export default {
		name: "recharge",
		mixins: [myMixins],
		components: {
			
		},
		data() {
			return {
				value:'',
				selectList:[{id:0,label:'50元',value:50,check:false},{id:1,label:'100元',value:100,check:false},{id:2,label:'200元',value:200,check:false},{id:3,label:'500元',value:500,check:false},{id:4,label:'1000元',value:1000,check:false},{id:5,label:'2000元',value:2000,check:false}]
			}
		},
		created() {
			const _this = this;
			this.getWeixinConfig()
		},
		mounted() {
			// document.title = '活动管理'
			const price = this.$route.query.price
			if(price&&Number(price)>0){
				this.value = price
			}
		},
		methods: {
			//选择充值金额
			activeItem(item) {
				for(let i=0,len=this.selectList.length;i<len;i++){
					if(this.selectList[i].id==item.id){
						this.selectList[i].check = true
						this.value = this.selectList[i].value
					}else{
						this.selectList[i].check = false
					}
				}
			},
			reChargeBtn() {
				// this.$dialog.alert({
				// 	title: '温馨提示',
				// 	message: '此处调用微信充值API',
				// 	closeOnClickOverlay: true
				// }).then(res=>{
				// 	console.log("sure")
				// }).catch(res=>{
				// 	console.log("cancel")
				// })
				const params = {
					price:this.value,
					num:1,
					merchant_id:localStorage.getItem('merchant_id')
				}
				this.$request.MerorderRecharge(params).then(res=>{
					if(res.ret == 200) {
						const result = res.data
						const param = {
							price:this.value,
							id:result,
							openid:localStorage.getItem('OPENID') || 'obD_t1CJQMV3LhLx0psum-iUdudI'
						}
						this.$request.MerorderUprecharge(param).then(res=>{
							// alert("res:" + JSON.stringify(res))
							if(res.ret == 200) {
								let weixinParams = {
								    "appId": res.data.appId,// 公众号appId，由商户传入
								    "timeStamp": res.data.timeStamp,// 时间戳
								    "nonceStr": res.data.nonceStr,// 随机串     
								    "package": res.data.package,
								    "signType": res.data.signType,// 微信签名方式
								    "paySign": res.data.paySign// 微信签名 
								}
								WeixinJSBridge.invoke('getBrandWCPayRequest', weixinParams, function(res) {
								    // Toast(res.err_msg)
								    if (res.err_msg == "get_brand_wcpay_request:ok") {
								        Toast('支付成功!')
								        // WeixinJSBridge.call('closeWindow');
								    } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
								        Toast('取消支付!')
								        // WeixinJSBridge.call('closeWindow');
								    } else {
								        Toast('支付失败!')
								    }
								    _this.$router.go(-1)
								    // WeixinJSBridge.call('closeWindow');
								})
							}
						})
					}
				})
			},
		}
	};
</script>
